<!--合伙人-单独设置比例-->
<template>
  <scroller class="all bg1">
    <div class="wrapper">

      <!--单独设置分配比例-->
      <div class="set bg2">
        <div class="set-title bg3">
          <text class="font26 text1 all">{{T('单独设置比例')}}</text>
        </div>

        <div class="set-uid">
          <text class="font26 text2">{{T('好友UID')+'：'}}</text>
          <input class="font30 text2 set-uid-input" ref="barcode" v-model="UID" type="text" :placeholder="T('请输入好友UID')">
          <div class="line line1"></div>
        </div>

        <div class="set-bl">
            <text class="font30 text2 all">{{T('设置与好友分配比例')}}</text>
            <div @click="remClick" class="set-bl-size bg3">
              <text class="font62 text3">{{'-'}}</text>
            </div>
            <div class="set-bl-value bg3">
              <text class="font26 text2">{{this.scale+'%'}}</text>
            </div>
            <div @click="addClick" class="set-bl-size bg3">
              <text class="font62 text3">{{'+'}}</text>
            </div>
        </div>

        <div class="set-but main-bt1" @click="setClick">
          <text class="font30 text1">{{T('设置')}}</text>
        </div>
      </div>

      <!--设置记录-->
      <div class="jilu">
        
        <div class="jilu-title bg3">
          <text class="font26 text1">{{T('比例调整记录')}}</text>
        </div>


        <div class="cell">
          <text class="font22 text3 all">{{T('好友UID')}}</text>
          <text class="font22 text3 all">{{T('调整后比例')}}</text>
          <text class="font22 text3 width130 tRight">{{T('调整时间')}}</text>
        </div>

        <div v-if="tipe" class="jilu-tipe">
          <text class="font30 text1">{{T('暂无记录~')}}</text>
        </div>

        <template v-else> 
          <div v-for="(item, index) in datas" v-bind:key="index">
            <div class="cell">
              <text class="font22 text3 all">{{item.uuid}}</text>
              <text class="font22 text3 all">{{item.proportion+'%'}}</text>
              <text class="font22 text3 width130 tRight">{{item.createTime}}</text>
            </div>
            <div class="line line1"></div>
          </div>
          <div class="genduo" @click="genduoClick">
            <text class="font22 main-t1">{{T('更多记录>>')}}</text>
          </div>
        </template>
      </div>
    </div>
  </scroller>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.wrapper {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 60px;
}

/************************* 设置*/
.set {
  border-radius: 12px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 20px;
}
.set-title {
  flex-direction: row;
  align-items: center;
  height:82px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: -30px;
  margin-right: -30px;
}
.set-bl{
  flex-direction: row;
  align-items: center;
  margin-top: 40px;
}
.set-bl-size {
  justify-content: center;
  align-items: center;
  width:60px;
  height:60px;
  border-radius:4px;
}
.set-bl-value {
  justify-content: center;
  align-items: center;
  width:120px;
  height:60px;
  border-radius:4px;
  margin-left: 30px;
  margin-right: 30px;
}
.set-uid{
  margin-top: 40px;
}
.set-uid-input{
  height: 50px;
  margin-top: 10px;
  background-color:transparent;
  placeholder-color:#6E7488;
}
.set-but{
  justify-content: center;
  align-items: center;
  height:74px;
  border-radius:12px;
  margin-top: 60px;
  margin-bottom: 60px;
}

/************************* 记录*/
.jilu{
  margin-top: 40px;
  padding-left: 30px;
  padding-right: 30px;
}
.jilu-title{
  flex-direction: row;
  align-items: center;
  height:82px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;

  padding-left: 30px;
  padding-right: 30px;

  margin-left: -30px;
  margin-right: -30px;
}
.jilu-tipe{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 300px;
}
.cell {
  flex-direction: row;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.line{
  height:1px;
}
.genduo {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100px;
}

/***************** 宽高*/
.width130 {
  width: 130px;
}
</style>

<script>
import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jhttps from "@/_js/https";
import jmath from "@/_js/math";


const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("单独设置比例"));

/**
 * 单独设置分配比例
 */
export default {
  
  data() {
    return {
      T:T,

      UID:"", //好友UID
      scale:50, //设置的比例

      tipe:false,
      datas:[], //数据源
    };
  },

  //即将显示
  mounted() {
    this.httpsSetScaleRecode();
  },

  methods: {

    initData(datas) {

      for (let index = 0; index < datas.length; index++) {
        var data = datas[index];
        data.createTime = jtime.getTime(data.createTime, 'y/M/d');
        data.proportion = jmath.cheng(data.proportion, '100');
      }
      return datas;
    },

    /*************** https*/
    //http查询调整记录
    httpsSetScaleRecode(){
      
      var param = {'pageNo':1};
      jhttps.post("partner/queryProportionRecodeList", param,true,(data)=>{
          this.onRefresh = false;
          if(data.status == 200){
            var datas = this.initData(data.data);
            this.tipe = (datas.length == 0);
            this.datas = datas;
          }else{
            jmodal.toast(data.msg);
          }
      });
    },

    //http查询比例
    httpsGetProportion(){
      jmodal.showLoad();
      var param = {'uuid':this.UID};
      jhttps.post("partner/queryProportionByUuid",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          data = data.data;

          var proportion = jmath.cheng(data.proportion, '100');
          var message = T('好友（${1}）原分配比例为${2}%修改后比例为${3}%，修改当期生效，历史已分配奖励不受影响。');
          message = message.replace("${1}",this.UID);
          message = message.replace("${2}",proportion);
          message = message.replace("${3}",this.scale);
          var map = {'title':T('确认修改分配比例'),
                    'message':message};
          jmodal.confirm(map,(flag)=>{
            if(flag == "true"){
              this.httpsSetProportion();
            }
          });
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    //http设置比例
    httpsSetProportion(){
      jmodal.showLoad();

      var proportion = jmath.chu(this.scale, '100');
      var param = {'uuid':this.UID, 
                  'proportion':proportion};
      jhttps.postX("partner/setProportionByUuid",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          this.httpsSetScaleRecode();
          jmodal.toast(T('设置成功'));
        }else{
          jmodal.toast(data.msg);
        }
      });
    },
    /*************** 点击*/
    //比例-减
    remClick() {
      if(this.scale > 0) {
        this.scale -= 10;
      }
    },

    //比例-加
    addClick(){
      if(this.scale < 100) {
        this.scale += 10;
      }
    },

    //设置
    setClick(){
      this.$refs.barcode.blur();
      if (this.UID.length) {
        this.httpsGetProportion();
      } else {
        jmodal.toast(T("请输入好友UID"));
      }
    },

    //更多记录
    genduoClick(){
      jnavigator.open("", "invite/PartnerSetScaleRecord");
    }
  },
};
</script>
